<template>
  <div>
    <Title title="商家分布"></Title>
    <div ref="mapContainer" style="width: 100%; height: 900px;">
      <v-chart :option="option"></v-chart>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Title from '../Title.vue';
import * as echarts from "echarts";
import mapJson from '@/assets/data/china.json';
import mapData from '@/assets/data/map.json';


const option = ref({});

echarts.registerMap('china', mapJson as any);

const setOption = () => {
  option.value = {
    geo: {
      type: 'map',
      map: 'china',
      top: "5%",
      bottom: "5%",
      layoutCenter: ['50%', '50%'],
      layoutSize: '98%',
      itemStyle: {
        areaColor: 'rgba(0, 255, 236, 0.2)',
        borderColor: 'rgba(0, 255, 236, 1)',
      }
    },
    legend: {
      orient: 'vertical',
      left: '5%',
      bottom: '5%',
      data: mapData.map(i => i.name),
      textStyle: {
        color: '#aaa'
      }
    },
    series: mapData.map(item => {
      return {
        type:"effectScatter",
        ripples: {
          scale: 5,
          brushType: 'stroke'
        },
        data: item.children,
        name: item.name,
        coordinateSystem: 'geo'
        
      }
    })
  }
}

onMounted(()=>{
  setOption();
})
</script>
<style scoped lang="scss"></style>